<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!--
        操作元素的属性
            1.获取属性
                attr("属性名")
                prop("属性名")
            2.设置属性
            3.移除属性
    -->
    <input type="checkbox" name="ch" checked="checked" id="aa" /> aa
    <input type="checkbox" name="ch" id="bb" /> bb
    <script src="js/jquery-3.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        //获取属性
        //固有属性
        let name = $("#aa").attr("name");
        console.log(name);
        let name2 = $("#aa").prop("name")
        console.log(name2);
        //返回值是Boolean的属性(元素设置了属性)
        let ck1 = $("#aa").attr("checked");
        let ck2 = $("#aa").prop("checked");
        console.log(ck1)
        console.log(ck2)

        //返回值是Boolean的属性(元素未设置属性)
        let ck3 = $("#bb").attr("checked");
        let ck4 = $("#bb").prop("checked");
        console.log(ck3)
        console.log(ck4)

        //自定义属性
        let abc1 = $("#aa").attr("abc");
        let abc2 = $("#aa").prop("abc");
        console.log(abc1);
        console.log(abc2);
        //设置属性
        //固有属性
        $("#aa").attr("value", "1");
        $("#bb").prop("value", "2");

        //返回值是Boolean的属性
        $("#bb").attr("checked", "checked");
        $("#bb").prop("checked", false);

        //自定义属性
        $("#aa").attr("uname", "admin");
        $("#aa").prop("uage", 18);
        //移除属性
        $("#aa").removeAttr("uname");
    </script>
</body>

</html>